<template>
  <div class="register-container">
    <div class="register-content">

      <form @submit.prevent="handleRegister">
        <!-- 圆形图片上传 -->
        <div class="avatar-uploader-container">
          <el-upload
              class="avatar-uploader"
              :auto-upload="false"
              :show-file-list="false"
              :on-change="handleChange"
              :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
          </el-upload>
        </div>
        <div class="form-group">
          <el-input type="username"
                    id = "username"
                    v-model="username"
                    placeholder="请输入您的用户名"
                    style="height: 40px; width : 350px; font-size: 16px;"
          >
            <template #prefix>
              <el-icon style="font-size: 24px;"><User /></el-icon>
            </template>
          </el-input>
        </div>
        <div class="form-group">
          <el-input type="email"
                    id = "email"
                    v-model="email"
                    placeholder="请输入您的邮箱"
                    style="height: 40px; width : 350px; font-size: 16px;"
          >
            <template #prefix>
              <el-icon style="font-size: 24px;"><Message /></el-icon>
            </template>
          </el-input>
        </div>
        <div class="form-group">
          <el-input type="password"
                    id = "password"
                    v-model="password"
                    placeholder="请输入您的密码"
                    style="height: 40px; width : 350px; font-size: 16px;"
                    show-password>
            <template #prefix>
              <el-icon style="font-size: 24px;"><Lock /></el-icon>
            </template>
          </el-input>
        </div>
        <div class="form-group">
          <el-input type="password"
                    id = "confirmPassword"
                    v-model="confirmPassword"
                    placeholder="请确认密码"
                    style="height: 40px; width : 350px; font-size: 16px;"
                    show-password>
            <template #prefix>
              <el-icon style="font-size: 24px;"><Lock /></el-icon>
            </template>
          </el-input>
        </div>
        <div class="form-group">
          <el-input type="Contact"
                    id = "Contact"
                    v-model="Contact"
                    placeholder="请输入您的联系方式"
                    style="height: 40px; width : 350px; font-size: 16px;"
          >
            <template #prefix>
              <el-icon style="font-size: 24px;"><ChatRound /></el-icon>
            </template>
          </el-input>
        </div>
        <div class="form-group" >
          <el-radio-group v-model="radio" class="custom-radio-group" >
            <el-radio :label="3">微信</el-radio>
            <el-radio :label="6">QQ</el-radio>
            <el-radio :label="9">电话</el-radio>
          </el-radio-group>
        </div>
        <div class="form-group" >
          <button type="submit" class="submit-button">注册</button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
import {ElMessage} from "element-plus";
import {Plus} from "@element-plus/icons-vue";

const username = ref('');
const email = ref('');
const password = ref('');
const confirmPassword = ref('');
const Contact = ref('');
const radio = ref('');
const router = useRouter();
const imageUrl = ref('');
const radio_val = ref('');
const formData = new FormData();
const image = ref(null);
const handleRegister = async () => {
  if (password.value !== confirmPassword.value) {
    ElMessage({
      message: '密码不一致，请重新输入',
      type: 'error',
      style: 'font-size:25px;font-weight:bold;',
      center: true,
      offset: 55,
      grouping:true
    })
    return;
  }
  // 验证输入
  if(!username.value){
    ElMessage({
      message: '请输入您的用户名',
      type: 'error',
      style: 'font-size:25px;font-weight:bold;',
      center: true,
      offset: 55,
      grouping:true
    })
    return
  }

  if (!email.value) {
    ElMessage({
      message: '请输入您的邮箱',
      type: 'error',
      style: 'font-size:25px;font-weight:bold;',
      center: true,
      offset: 55,
      grouping:true
    })
    return
  }

  if (!password.value) {
    ElMessage({
      message: '请输入您的密码',
      type: 'error',
      style: 'font-size:25px;font-weight:bold;',
      center: true,
      offset: 55,
      grouping:true
    })
    return;
  }

  if(radio.value===3)  radio_val.value = "0";
  else if(radio.value===6)  radio_val.value = "1";
  else if(radio.value===9)  radio_val.value = "2";
  console.log(radio_val.value);
  if (!((Contact.value === '' && radio_val.value === '' || (Contact.value !== '' && radio_val.value !== '')))) {
    Contact.value = ''
    radio_val.value = ''
    ElMessage({
      message: '请同时填写联系方式和联系方式类型或不填',
      type: 'error',
      style: 'font-size:25px;font-weight:bold;',
      center: true,
      offset: 55
    })
    return
  }
  else{
    // 验证联系方式
    if(Contact.value !=='' && radio_val.value !== ''){
      // 验证联系方式格式是否正确
      if(radio_val.value === '0'){
        const wxReg = /^[a-zA-Z][a-zA-Z\d_-]{5,19}$/
        if(!wxReg.test(Contact.value)){
          ElMessage({
            message: '请输入正确格式的微信号',
            type: 'error',
            style: 'font-size:25px;font-weight:bold;',
            center: true,
            offset: 55
          })
          return
        }
      }
      else if(radio_val.value === '1'){
        const qqReg = /^[1-9][0-9]{4,14}$/
        if(!qqReg.test(Contact.value)){
          ElMessage({
            message: '请输入正确格式的QQ号',
            type: 'error',
            style: 'font-size:25px;font-weight:bold;',
            center: true,
            offset: 55
          })
          return
        }
      }
      else if(radio_val.value === '2'){
        const telReg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
        if(!telReg.test(Contact.value)){
          ElMessage({
            message: '请输入正确格式的手机号码',
            type: 'error',
            style: 'font-size:25px;font-weight:bold;',
            center: true,
            offset: 55
          })
          return
        }
      }
    }
  }

  if(!imageUrl.value){
    imageUrl.value = '';
    formData.append("ProfilePhoto", imageUrl.value);
  }

  formData.append("ProfilePhoto", image.value)
  formData.append("UserName", username.value);
  formData.append("Email", email.value);
  formData.append("Password", password.value);
  formData.append("Contact", Contact.value);
  formData.append("ContactType", radio_val.value);
  for (const [key, value] of formData.entries()) {
    console.log(key, value);
  }

  try {
    const response = await axios.post('http://localhost:8080/auth/register', formData);
    if (response.status === 200) {
      ElMessage({
        message: '注册成功',
        type: 'success',
        style: 'font-size:25px;font-weight:bold;',
        offset: 55,
        grouping:true
      })
      setTimeout(() => {
        router.push('/'); // 注册成功后跳转到登录页面
      }, 100);
    } else {
      ElMessage({
        message: '注册失败',
        type: 'error',
        style: 'font-size:25px;font-weight:bold;',
        center: true,
        offset: 55,
        grouping:true
      })
    }
  } catch (error) {
    ElMessage({
      message: '网络错误，请稍后再试',
      type: 'error',
      style: 'font-size:25px;font-weight:bold;',
      center: true,
      offset: 55,
      grouping:true
    })
  }
};
const handleChange = (uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw)
  image.value = uploadFile.raw;
  console.log(imageUrl.value)
}

const beforeAvatarUpload = (file) => {
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!');
  }
  return isLt2M;
};

</script>

<style scoped>
.register-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 97vh; /* 视口高度 */
  width: 95vw; /* 视口宽度 */
  margin : auto;
}

.register-container > * {
  /* 确保子元素不会破坏父元素的布局 */
  margin: 0;
  padding: 0;
  flex-shrink: 0; /* 防止子元素缩小 */
}

.register-content {
  background: white;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  width: 500px;
}

.form-group {
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
}

label {
  display: block;
  margin-bottom: 5px;
  color: #333;
}

.el-input {
  width: 100%;
}

.submit-button {
  display: flex;
  justify-content: center;
  width: 250px;
  padding: 10px;
  background-color:#FFD466;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 10px; /* 设置字符间的间距，这里设置为2px，可根据需要调整 */
  margin-top: -15px;
  margin-bottom: 10px;
  font-size:15px;
  font-weight:bold;
}

.submit-button:hover {
  background-color: #FFB74D;
}

.error-message {
  color: red;
  text-align: center;
  margin-top: 10px;
}

.success-message {
  color: green;
  text-align: center;
  margin-top: 10px;
}
/* 自定义 radio 样式 */
.custom-radio-group {
  display: flex;
  justify-content: center;
}
:deep(.el-radio__label) {
  font-size:15px;
}
/*头像样式*/
.avatar-uploader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  margin-top: 40px;
}

.avatar-uploader-container:focus {
  background-color: white;
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.avatar {
  font-size: 28px;
  width: 150px;
  height: 150px;
  line-height: 140px; /* 垂直居中 */
  text-align: center;
  object-fit: cover;
}
</style>
<style>
.avatar-uploader .el-upload {
  border: 2px solid #d9d9d9; /* 灰色轮廓 */
  border-radius: 50%; /* 圆形轮廓 */
  background-color: #d9d9d9; /* 深灰色背景 */
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
  width: 150px; /* 圆形宽度 */
  height: 150px; /* 圆形高度 */
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d; /* 浅灰色 */
  width: 150px;
  height: 150px;
  line-height: 140px; /* 垂直居中 */
  text-align: center;
}
</style>
